<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			smargin:0;
			padding:0;
		}
		ul{
			list-style:none;
		}
		img{
			border:none;
			margin:0;
		}
		#box{
			width:1000px;
			height:400px;
			border:1px solid #ddd;
/*			background:url(images/child1.jpg) left top;*/
			margin:50px auto;
		}
		#list{
			height:400px;
		}
		#list li{
			float:left;
			height:400px;
			width:100px;
			overflow:hidden;
		}
		#list .first{
			width:600px;
		}
		#pic{
			width:100px;
			height:400px;
			border:1px solid #ddd;
			margin:10px auto;
		}
		/*#pic img{
			display:block;
			
		}*/
	</style>
	<script src="jquery.js"></script>
	<script>
		window.onload=function(){
			// $("#list").on("mouseover","li",function(){
			// 	$("#list li").animate({
			// 		width:100
			// 	},10).eq($(this).index()).animate({
			// 		width:600
			// 	},500)
			// })
			$("#list li").mouseover(function(){
				//alert("ok")
				$(this).stop().animate({width:600},500).siblings().stop().animate({width:100},500);
			})
		}
	</script>
</head>
<body>
	<div id="box">
		<ul id="list">
			<li class="first"><img src="images/child1.jpg" alt=""></li>
			<li><img src="images/child2.jpg" alt=""></li>
			<li><img src="images/child3.jpg" alt=""></li>
			<li><img src="images/child4.jpg" alt=""></li>
			<li><img src="images/child5.jpg" alt=""></li>
		</ul>
	</div>
	<!-- <div id="pic">
		<img src="images/child1.jpg" alt="">
	</div> -->
</body>
</html>